{extend name="base/base"}
{block name="title"}商品详情{/block}

{block name="resources"}
	{load href="/static/css/index/index.css"}
	{load href="/static/css/index/nav.css"}
	{load href="/static/jquery.jqzoom.js"}
{/block}	

{block name="content"}
<div class="navBox clearfix">
	<div class="common-width clearfix">
		{include file="base/nav" /}	

		<script type="text/javascript">
			$(".topmenu li").hide();
			$(".topmenu").hover(
				function (){
					$(".topmenu li").css('display', 'block');$(".topmenu li").addClass('clearfix');
				},
				function (){
					$(".topmenu li").hide();
				}
				);
			function preview(img){
	$("#preview .jqzoom img").attr("src",$(img).attr("src"));
	$("#preview .jqzoom img").attr("jqimg",$(img).attr("bimg"));
};
$(function(){
	$(".jqzoom").jqueryzoom({xzoom:380,yzoom:410});
});

		</script>
	</div>
</div>


<div class="description-info common-width">
	<div class="description clearfix">
		<div class="leftArea fl">
			<div class="description-imgs">
				<div id="preview" class="preview">
					<span class="jqzoom"><img jqimg="/uploads/b1.jpg" src="/uploads/s1.jpg" /></span> 
				</div>
				<!--缩图开始-->
				<div class="scroll">
				  <div class="items">
				    <ul>
				      <li><img alt="佳能" bimg="http://test1.com/uploads/picture/goods/49659aecbb2aa7e99cd59cac8ea2a8a5.jpg" src="http://test1.com/uploads/picture/goods/49659aecbb2aa7e99cd59cac8ea2a8a5.jpg" onclick="preview(this);"></li>
				      <li><img alt="佳能" bimg="ihttp://test1.com/uploads/picture/goods/1881bb9f44bd1bbad25a9085b1aaa3d5.jpg" src="http://test1.com/uploads/picture/goods/1881bb9f44bd1bbad25a9085b1aaa3d5.jpg" onclick="preview(this);"></li>
					  <li><img alt="佳能" bimg="http://test1.com/uploads/picture/goods/49659aecbb2aa7e99cd59cac8ea2a8a5.jpg" src="http://test1.com/uploads/picture/goods/49659aecbb2aa7e99cd59cac8ea2a8a5.jpg" onclick="preview(this);"></li>
				      <li><img alt="佳能" bimg="ihttp://test1.com/uploads/picture/goods/1881bb9f44bd1bbad25a9085b1aaa3d5.jpg" src="http://test1.com/uploads/picture/goods/1881bb9f44bd1bbad25a9085b1aaa3d5.jpg" onclick="preview(this);"></li><li><img alt="佳能" bimg="http://test1.com/uploads/picture/goods/49659aecbb2aa7e99cd59cac8ea2a8a5.jpg" src="http://test1.com/uploads/picture/goods/49659aecbb2aa7e99cd59cac8ea2a8a5.jpg" onclick="preview(this);"></li>
				      <li><img alt="佳能" bimg="ihttp://test1.com/uploads/picture/goods/1881bb9f44bd1bbad25a9085b1aaa3d5.jpg" src="http://test1.com/uploads/picture/goods/1881bb9f44bd1bbad25a9085b1aaa3d5.jpg" onclick="preview(this);"></li>
				    </ul>
				  </div>
				</div>
			</div>
		</div>
		
	</div>
</div>
		<style type="text/css">
			.jqzoom{float:left;border:none;position:relative;cursor:pointer;display:block;background-size: 100%;}
			.zoomdiv{z-index:100;position:absolute;top:0px;left:0px;width:340px;height:340px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align:center;overflow:hidden;}
			.jqZoomPup{z-index:10;visibility:hidden;position:absolute;top:0px;left:0px;width:20px;height:20px;border:1px solid #aaa;background:#ffffff url(../images/zoom.png) 50% center no-repeat;opacity: 0.5;-moz-opacity: 0.5;-khtml-opacity: 0.5;filter: alpha(Opacity=50);}
			/*图片小图预览列表*/
			.description-imgs .preview img{position: absolute;left: 50%}
			.description-imgs .preview{width:300px;height:300px;border:1px solid #DFDFDF;}
			.description-imgs .scroll{clear:both;margin-top:5px;width:340px;}
			.description-imgs .scroll .items{float:left;position:relative;width:322px;height:56px;overflow:hidden;}
			.description-imgs .scroll .items ul{position:absolute;width:999999px;height:56px;}
			.description-imgs .scroll .items ul li{float:left;width:64px;text-align:center;}
			.description-imgs .scroll .items ul li img{border:1px solid #CCC;padding:2px;width:50px;height:50px;}
			.description-imgs .scroll .items ul li img:hover{border:2px solid #FF6600;padding:1px;}
		</style>


{/block}

